<!-- 快捷导航 -->
<template>
  <div class="quicknav">
    <mt-swipe :auto="0" :continuous="false">
      <mt-swipe-item v-for="(item, index) in 3" :key="index">
        <ul>
          <li
            v-for="(items, index) in slideData.slice(
              (item - 1) * 10,
              (item - 1) * 10 + 10
            )"
            :key="index"
          >
            <img v-lazy="items.img" src="@/assets/image/00.png"  alt="" />
            <span class="text" v-text="items.desc"></span>
          </li>
        </ul>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: { slideData: Array },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  mounted() {},
};
</script>
<style lang="less">
.quicknav {
  height: 100%;
  .mint-swipe {
    ul {
      display: flex;
      flex-wrap: wrap;
      border-radius: 30px;
      li {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 100%;
        }
        .text {
          text-align: center;
          font-size: 13px;
          color: #000;
        }
      }
    }
  }
  .mint-swipe-indicators {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    z-index: 10;
    margin-left: -23px;
    .mint-swipe-indicator {
      margin: 0;
      border-radius: 0;
      width: 15px;
      height: 4px;
      background: linear-gradient(-88deg, #ff4f2d, #f91f27);

      &:first-child {
        border-radius: 2px 0 0 2px;
      }

      &:last-child {
        border-radius: 0 2px 2px 0;
      }
    }
    .is-active {
      border-radius: 2px !important;
      opacity: 1;
    }
  }
}
</style>